<template>
	<view>
		<view class="other-box">
			<view class="h2-font" style="margin: 20rpx 0;">其他功能</view>
			<view>
				<u-button text="修改密码" plain type="error" @click="handleUpdate"></u-button>
				<view style="height: 10rpx;"></view>
				<u-button text="退出登录" @click="logout"></u-button>
			</view>
		</view>
		
		
		<u-popup :show="open" @close="handleClose()" closeable>
			<view style="padding: 20rpx;">
				<view class="h2-font">修改登录密码</view>
				
				<view>
					<u-form label-width="65">
						<u-form-item label="新密码" required>
							<u-input v-model="password" placeholder="请输入新密码" type="password"></u-input>
						</u-form-item>
					</u-form>
				</view>
				
				<u-button text="确定修改" type="success" @click="submitPassword()"></u-button>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				open: false,
				password: undefined,
			}
		},
		methods: {
			/* 打开修改密码弹窗 */
			handleUpdate() {
				this.open = true;
			},
			/* 关闭修改密码弹窗 */
			handleClose() {
				this.open = false;
				this.password = undefined
			},
			submitPassword() {
				if(!this.password) {
					uni.showToast({
						title: "请输入密码",
						icon:"error"
					})
				}
				this.$request("/mobile/updatePassword", "post", {password: this.password}).then(res => {
					uni.showToast({
						title: "操作成功！",
						icon: "success"
					})
					this.handleClose();
				})
			},
			logout() {
				uni.removeStorage({
					key: this.$constant.API_TOKEN,
					success: () => {
						this.$request("/mobile/logout", "get");
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.other-box {
		background-color: #FFF;
		margin-top: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
</style>